<template>
    <div class="container">
        <div class="banners">
            <banners v-bind:img-list="bannerList" />
        </div>

        <!-- <Signin v-bind:is-signed="false" v-bind:signin-days="[]" v-bind:signin-status="{}" v-bind:signin-percent="0"></Signin>-->

        <!--<div class="limit-projects" v-if="limitProductList.length>0">
            <div class="title">
                <img class="title-image" src="static/images/limitproject_icon.png">
            </div>
            <div class="project-swiper">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in limitProductList" :key="index">
                        <limit-product v-bind:product="item"></limit-product>
                    </swiper-slide>
                </swiper>
            </div>
        </div>-->

        <div class="projects" v-if="productList.length>0">
            <!--<div class="title">
                <span>免费福利</span>
            </div>-->
            <free-product v-for="(item,index) in productList" :key="index" v-bind:product="item"></free-product>
        </div>
        <div class="height110"></div>
    </div>
</template>

<script>
    import Banners from "../../components/Banners";
    import Signin from "./components/Signin";
    import FreeProduct from "../../components/FreeProduct";
    import LimitProduct from "../../components/LimitProduct";

    export default {
        name: "Home",
        components: {
            LimitProduct,
            FreeProduct,
            Banners,
            Signin
        },
        data() {
            return {
                bannerList: [],
                productList: [],
                //limitProductList:[],
                swiperOption: {
                    speed: 500,
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    preloadImages: true
                }
            }
        },
        mounted() {
            this.getProducts()
            this.getBanners()
        },
        methods: {

            getBanners() {
                this.$axios( {
                    method: 'post',
                    url: 'Index/lunbotu',
                } ).then( result => {
                    this.bannerList=result.data
                } ).catch( error => {
                } );
            },
            getProducts() {
                this.$axios( {
                    method: 'post',
                    url: 'Index/listshangpin',
                } ).then( result => {
                    this.productList=result.data
                } ).catch( error => {

                } );
            }
        },
    }
</script>

<style scoped>
    .height110 {
        height: 138px;
        width: 100%;
        display: block;
    }
    .limit-projects {
        display:flex;
        flex-direction:row;
        border-bottom:1px solid #dcdcdc;
        margin:0 20px;
        }

    .limit-projects .title {
        display:flex;
        flex-direction:column;
        width:163px;
        margin:20px 0;
        padding-right:30px;
        border-right:1px solid #dcdcdc;
        }

    .limit-projects .title-image {
        width:133px;
        height:118px;
        margin-top:5px;
        }

    .limit-projects .project-swiper {
        width:560px;
        height:168px;
        margin-left:30px;
        }

    .projects {
        margin:20px 20px 0 20px;
        display:flex;
        flex-direction:column;
        }

    .projects .title {
        width:100%;
        font-size:24px;
        font-weight:900;
        color:#fff;
        padding:4px 0;
        background-image:url("../../../static/images/projects_title_bg.png");
        background-repeat:no-repeat; /** 不重复*/
        background-size:cover;
        border-radius:20px;
        }

    .projects .title span {
        margin-left:37px;
        }
</style>
